<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- 顶部搜索区域 -->
      <el-form label-width="80px" :inline="true" size="normal">
        <el-form-item>
          <el-input
            v-model="searchObj.roleName"
            placeholder="角色名称"
          ></el-input>
        </el-form-item>

        <el-button type="primary" @click="searchRole">查询</el-button>
        <el-button @click="clearRole">清空</el-button>
      </el-form>
      <!-- 添加 -->
      <div class="mb-20">
        <el-button type="primary" @click="addRole">添加</el-button>
      </div>

      <!-- table 表格区域 -->
      <el-table border stripe style="width: 960px" :data="pageList.items">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" type="index" width="80" align="center" />
        <!-- v-if -->
        <el-table-column label="角色名称" align="center">
          <template #default="{ row, $index }">
            <div v-show="!inputIsShow">{{ row.roleName }}</div>
            <div v-show="inputIsShow">
              <el-input
                v-model="row.roleName"
                class="edit-input"
                @blur="iptBlur(row)"
              ></el-input>
              <!-- 取消 -->
              <el-button
                class="cancel-btn"
                type="warning"
                icon="el-icon-refresh"
                @click="cancelEdit(row)"
                >返回</el-button
              >
            </div>
          </template>
        </el-table-column>

        <!-- 操作区域 -->
        <el-table-column label="操作" width="200px" align="center">
          <template #default="{ row, $index }">
            <!--  -->
            <el-button
              size="mini"
              type="info"
              icon="el-icon-info"
              title="分配权限"
              @click="toTreePage(row)"
            ></el-button>

            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              title="修改角色"
              @click="updataRole(row)"
            ></el-button>

            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete  "
              title="删除角色"
              @click="removeRole(row)"
            ></el-button>
            <!--  -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页专区 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
        layout=" prev, pager, next, jumper,->,sizes,total"
      >
      </el-pagination>

      <!-- 点击添加的 dialog框 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>添加角色名称</span>
        <el-input
          class="mt-20"
          v-model="newRoleName.roleName"
          placeholder="请输入新名称"
          size="normal"
          clearable
        ></el-input>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveNewRoleName">保存</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import roleApi from "@/api/acl/role";
import { Message } from "element-ui";

export default {
  data() {
    return {
      //分页相关
      page: 1, // 当前页
      limit: 5, // 每页条
      total: 400,
      searchObj: {
        roleName: "",
      },
      pageList: [], // 请求的分页数据
      //点击添加 dialog 框
      dialogVisible: false,
      // 添加的新角色名称 v-model
      newRoleName: {
        roleName: "",
      },
      // input显示
      inputIsShow: false,
    };
  },
  methods: {
    // 分页相关
    handleSizeChange(val) {
      console.log(`每页${val}条`);
      this.limit = val;
      // 请求分页数据
      this.getPageList();
    },
    handleCurrentChange(val) {
      console.log(`当前页:${val}`);
      this.page = val;
      // 请求分页数据
      this.getPageList();
    },

    // 请求分页数据
    async getPageList() {
      const { page, limit, searchObj } = this;
      try {
        let result = await roleApi.getPageList(page, limit, searchObj);
        const { total } = result.data;
        this.total = total;
        this.pageList = result.data;
        console.log(this.pageList);
      } catch (error) {
        console.log("请求分页数据失败,请重试");
      }
    },

    // 查询
    searchRole() {
      this.getPageList();
    },
    // 清空
    clearRole() {
      this.searchObj.roleName = "";
      this.getPageList();
    },
    //添加
    addRole() {
      this.dialogVisible = true;
    },
    // 修改角色
    updataRole() {
      this.inputIsShow = true;
    },
    // 角色名称 warning
    cancelEdit() {
      // 返回 切换到div
      this.inputIsShow = false;
    },

    // 点击添加 dialog框区域
    // 关闭dialog前的回调
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.newRoleName = {};
        })
        .catch((_) => {
          Message.warning("取消添加");
        });
    },
    // 点击 dialog 保存
    async saveNewRoleName() {
      this.dialogVisible = false;
      // 发请求
      try {
        let result = await roleApi.save(this.newRoleName);
        this.newRoleName = {};
        Message.success("保存成功");
        console.log(result);
      } catch (error) {
        console.error("保存失败,请重试");
      }
    },

    // 操作区域 按钮

    // 分配权限
    toTreePage(row) {
      this.$router.push({
        path: `/limits/role/auth/${row.id}?roleName=${row.roleName}`,
      });
    },

    // 删除
    async removeRole(row) {
      try {
        await roleApi.removeById(row.id);
        // 请求分页数据
        this.getPageList();
        Message.success("删除成功");
      } catch (error) {
        Message.warning("删除失败");
      }
    },
    // 行内input失焦
    async iptBlur(row) {
      try {
        await roleApi.updateById(row);
      } catch (error) {}
    },
  },
  mounted() {
    // 请求分页数据
    this.getPageList();
  },
};
</script>
<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
